<template>
  <div class="common-layout">
    <el-container>
      <!--头部-->
      <el-header>
        <el-row>
        <el-col :span="12">
        <span style="font-size: 20pt;">RBAC</span>   
      </el-col>
      <el-col :span="12" style="text-align: right;">
        <el-button type="danger" round :icon="Close" @click="quit">退出</el-button>
      </el-col>
     </el-row>
      </el-header>
      <el-container>

        <!--左侧菜单-->
        <el-aside width="255px">

      <el-menu active-text-color="#ffd04b" background-color="#545c64"  
      :default-openeds="[1,2,3,4]" :default-active="route.path" class="el-menu-vertical-demo"  text-color="#fff" @open="handleOpen" @close="handleClose" router>   

      <el-sub-menu index="1">
        <template #title>
            <el-icon><location /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item v-for="item in menuUrl" :key="item.userId" :index="item.url">
              <el-icon><icon-menu /></el-icon>{{ item.menuName }}
            </el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="2">
          <template #title>
            <el-icon><location /></el-icon>
            <span>请假管理</span>
          </template>

            <el-menu-item index="AddLeave">
              <el-icon><icon-menu /></el-icon>
              请假申请
            </el-menu-item>
            <el-menu-item index="LeaveList">
              <el-icon><icon-menu /></el-icon>
              请假列表
            </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon><location /></el-icon>
            <span>溯源管理</span>
          </template>

            <el-menu-item index="ShoppingView">
              <el-icon><icon-menu /></el-icon>
              溯源管理--新增/修改
            </el-menu-item>
        </el-sub-menu>
      </el-menu>
        </el-aside>

        <!--右侧-->
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import axios from 'axios';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ElTree } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'
import {useRoute,useRouter} from 'vue-router'
const treeRef = ref<InstanceType<typeof ElTree>>()
import { Document, Menu as IconMenu, Location, Setting,Close } from '@element-plus/icons-vue'


const route = useRoute();
const router = useRouter();

onMounted(() => {
  getMenu()
})


const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

//获取Token字符串中的UserId
var token:any = localStorage.getItem("Tokens")
 //console.log(token);
 //分割JWT字符串
 const [header, payload, signature] = token.split(".");
 //Base64解码Payload
 const payloadDecoded = atob(payload);
 //解析JSON字符串
 const payloadParsed=JSON.parse(payloadDecoded)
 //提取userId和roleId
 const userId = payloadParsed.sub;
 const roleId = payloadParsed['http://schemas.microsoft.com/ws/2008/06/identity/claims/role'];  

//动态菜单列表
const menuUrl: any = ref([])
const getMenu = () => {
  let menuInfo = {
    userId: userId
  }
  axios.post('/api/MenuManagement/GetMenu', menuInfo).then(res => {
    //console.log(res);
    menuUrl.value = res.data.data;
  }).catch(err => {
    console.log(err);

  })
}

//退出
const quit = () => {
  router.push('UserInfoLogin')
  localStorage.removeItem("Tokens")
}


</script>

<style scoped>

/* 头部 */
.el-header{
  background-color:aquamarine;
  height: 60px;
  line-height: 60px;
  color:#fff
}

/* 左侧菜单 */
.el-aside{
  background-color: #545c64;
  height: calc(100vh - 60px);
}

/* 右侧部分 */


</style>

<!--        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>用户管理</span>
          </template>

            <el-menu-item index="AddUserInfo">
              <el-icon><icon-menu /></el-icon>
              添加用户
            </el-menu-item>
            <el-menu-item index="UserInfoList">
              <el-icon><icon-menu /></el-icon>
              用户列表
            </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon><location /></el-icon>
            <span>角色管理</span>
          </template>

            <el-menu-item index="AddRole">
              <el-icon><icon-menu /></el-icon>
              添加角色
            </el-menu-item>
            <el-menu-item index="RoleList">
              <el-icon><icon-menu /></el-icon>
              角色列表
            </el-menu-item>

        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon><location /></el-icon>
            <span>菜单管理</span>
          </template>

            <el-menu-item index="AddMenu">
              <el-icon><icon-menu /></el-icon>
              添加菜单
            </el-menu-item>
            <el-menu-item index="MenuList">
              <el-icon><icon-menu /></el-icon>
              菜单列表
            </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="4">
          <template #title>
            <el-icon><location /></el-icon>
            <span>菜单角色管理</span>
          </template>

            <el-menu-item index="RoleMenu">
              <el-icon><icon-menu /></el-icon>
              添加菜单角色
            </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="5">
          <template #title>
            <el-icon><location /></el-icon>
            <span>请假管理</span>
          </template>

            <el-menu-item index="AddLeave">
              <el-icon><icon-menu /></el-icon>
              请假申请
            </el-menu-item>
            <el-menu-item index="LeaveList">
              <el-icon><icon-menu /></el-icon>
              请假列表
            </el-menu-item>
        </el-sub-menu> -->